<script>
import TableCard from '@/components/TableCard/index.vue'

export default {
  name: 'EnergyList',
  components: { TableCard },
  props: {
    // 请求参数
    requestParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      cardData: {
        head: [
          {
            prop: 'energyName',
            name: '能源名称',
            minWidth: 110
          },
          {
            prop: 'energyUnit',
            name: '单位',
            minWidth: 110
          }
        ],
        body: [],
        page: 1,
        limit: 10,
        total: 0
      },
      params: {}
    }
  },
  watch: {
    popData: {
      handler(data) {
        const { path, paramName } = this.popConfig
        this.params = {}

        for (let key in data) {
          if (key === 'id') {
            this.params[paramName] = data[key]
          }
        }

        this.initSelectData(path)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    async initSelectData(path) {
      const newPath = path.split('.')
      let api = this.$api
      newPath.forEach((e) => {
        api = api[e]
      })
      const { page, limit } = this.cardData
      const params = {
        page,
        limit,
        ...this.params
      }
      const res = await api(params)
      if (Number(res.code) === 1000) {
        this.cardData.body = res.data.records
        this.cardData.total = res.data.total
      } else if (res.msg) {
        this.$message({ type: 'error', message: res.msg })
      }
    },
    handleCurrentChange({ limit, page }) {
      this.cardData.limit = limit
      this.cardData.page = page
      this.detailQueryPage()
    }
  }
}
</script>

<template>
  <el-form ref="form" label-width="120px">
    <TableCard
      :cardData="cardData"
      @handleCurrentChange="handleCurrentChange"
    ></TableCard>
  </el-form>
</template>

<style scoped lang="scss">

</style>
